<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>摄影爱好者 - 群组详情</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 60px;
    }
    
    /* 群组头部样式 */
    .group-header {
      position: relative;
      height: 180px;
      background-color: #e9ecef;
    }
    
    .group-cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .group-avatar-container {
      position: absolute;
      bottom: -40px;
      left: 15px;
    }
    
    .group-avatar {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      border: 3px solid white;
      object-fit: cover;
    }
    
    .group-info {
      padding-top: 45px;
      padding-left: 15px;
      padding-right: 15px;
      background-color: white;
    }
    
    .group-title-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    
    .group-title {
      font-size: 18px;
      font-weight: 700;
      color: #333;
      margin-bottom: 5px;
    }
    
    .group-meta {
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .group-actions {
      display: flex;
      gap: 8px;
    }
    
    .group-desc {
      font-size: 14px;
      color: #555;
      line-height: 1.5;
      margin-bottom: 15px;
    }
    
    .group-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .group-tag {
      font-size: 12px;
      padding: 3px 10px;
      background-color: #f0f7ff;
      color: #0d6efd;
      border-radius: 12px;
    }
    
    /* 导航标签样式 */
    .nav-tabs {
      border-bottom: 1px solid #eee;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }
    
    .nav-tabs .nav-link {
      color: #666;
      font-size: 14px;
      padding: 12px 15px;
      border: none;
      border-bottom: 2px solid transparent;
      border-radius: 0;
    }
    
    .nav-tabs .nav-link.active {
      color: #0d6efd;
      border-bottom-color: #0d6efd;
      font-weight: 500;
    }
    
    .nav-tabs .nav-link:hover {
      color: #0d6efd;
    }
    
    /* 内容列表通用样式 */
    .content-section {
      padding: 15px;
    }
    
    .list-item {
      background-color: white;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 12px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }
    
    .item-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .user-info {
      flex: 1;
    }
    
    .user-name {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
    
    .post-time {
      font-size: 12px;
      color: #999;
    }
    
    .item-actions {
      color: #999;
      font-size: 16px;
    }
    
    /* 文章列表样式 */
    .article-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .article-excerpt {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .article-media {
      display: flex;
      gap: 5px;
      margin-bottom: 10px;
    }
    
    .article-media img {
      width: 32%;
      height: 80px;
      border-radius: 6px;
      object-fit: cover;
    }
    
    .article-stats {
      display: flex;
      gap: 15px;
      font-size: 12px;
      color: #999;
    }
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    
    /* 相册列表样式 */
    .album-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }
    
    .album-item {
      aspect-ratio: 1;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }
    
    .album-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .album-count {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,0.5);
      color: white;
      font-size: 12px;
      padding: 3px 5px;
      text-align: right;
    }
    
    /* 动态列表样式 */
    .moment-content {
      font-size: 14px;
      color: #333;
      line-height: 1.5;
      margin-bottom: 10px;
    }
    
    .moment-images {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 10px;
    }
    
    .moment-images img {
      width: calc(33.333% - 3.333px);
      aspect-ratio: 1;
      border-radius: 6px;
      object-fit: cover;
    }
    
    /* 服务列表样式 */
    .service-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    .service-title {
      font-size: 15px;
      font-weight: 600;
      color: #333;
    }
    
    .service-price {
      font-size: 15px;
      font-weight: 600;
      color: #dc3545;
    }
    
    .service-provider {
      font-size: 13px;
      color: #666;
      margin-bottom: 5px;
    }
    
    .service-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 8px;
    }
    
    .service-tag {
      font-size: 12px;
      padding: 2px 8px;
      background-color: #f8f9fa;
      color: #666;
      border-radius: 4px;
    }
    
    /* 招聘求职列表样式 */
    .job-title {
      font-size: 15px;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
    }
    
    .job-company {
      font-size: 13px;
      color: #0d6efd;
      margin-bottom: 5px;
    }
    
    .job-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 12px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .job-desc {
      font-size: 13px;
      color: #555;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    /* 底部操作栏 */
    .bottom-actions {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      padding: 10px 15px;
      display: flex;
      gap: 10px;
      z-index: 1000;
    }
    
    .bottom-btn {
      flex: 1;
      padding: 8px 0;
      border-radius: 8px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    /* 空状态样式 */
    .empty-state {
      text-align: center;
      padding: 50px 20px;
      color: #999;
    }
    
    .empty-state i {
      font-size: 48px;
      margin-bottom: 15px;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <!-- 群组头部封面 -->
  <div class="group-header">
    <img src="https://picsum.photos/1200/400?random=1" class="group-cover" alt="群组封面">
    <div class="group-avatar-container">
      <img src="https://picsum.photos/200/200?random=2" class="group-avatar" alt="群组头像">
    </div>
  </div>
  
  <!-- 群组基本信息 -->
  <div class="group-info">
    <div class="group-title-container">
      <div>
        <h1 class="group-title">摄影爱好者</h1>
        <div class="group-meta">
          <span><i class="fa fa-users me-1"></i> 2,345名成员</span>
          <span><i class="fa fa-map-marker me-1"></i> 全国</span>
          <span><i class="fa fa-clock-o me-1"></i> 创立于2022-05-18</span>
        </div>
      </div>
      <div class="group-actions">
        <button class="btn btn-primary btn-sm rounded-pill px-4">
          <i class="fa fa-plus me-1"></i> 加入
        </button>
        <button class="btn btn-outline-secondary btn-sm rounded-pill">
          <i class="fa fa-share-alt"></i>
        </button>
      </div>
    </div>
    
    <p class="group-desc">
      这里是摄影爱好者的交流天地，无论你是专业摄影师还是摄影新手，都可以在这里分享你的作品、交流拍摄技巧、探讨器材使用心得，一起发现生活中的美好瞬间。
    </p>
    
    <div class="group-tags">
      <span class="group-tag">摄影</span>
      <span class="group-tag">器材</span>
      <span class="group-tag">技巧</span>
      <span class="group-tag">风光</span>
      <span class="group-tag">人像</span>
      <span class="group-tag">后期</span>
    </div>
  </div>
  
  <!-- 内容导航标签 -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#articles">文章</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#albums">相册</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#moments">动态</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#services">服务</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#recruitments">招聘</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#job-seekings">求职</a>
    </li>
  </ul>
  
  <!-- 内容区域 -->
  <div class="tab-content">
    <!-- 文章列表 -->
    <div class="tab-pane fade show active" id="articles">
      <div class="content-section">
        <div class="list-item">
          <div class="item-header">
            <img src="https://picsum.photos/100/100?random=10" class="user-avatar" alt="用户头像">
            <div class="user-info">
              <div class="user-name">光影行者</div>
              <div class="post-time">2小时前</div>
            </div>
            <div class="item-actions">
              <i class="fa fa-ellipsis-v"></i>
            </div>
          </div>
          <h3 class="article-title">初学者必看：10个提升构图能力的实用技巧</h3>
          <p class="article-excerpt">
            很多摄影初学者常常困惑于如何拍出更具吸引力的照片，其实构图是关键。本文分享10个简单实用的构图技巧，帮助你快速提升摄影水平...
          </p>
          <div class="article-media">
            <img src="https://picsum.photos/300/200?random=20" alt="文章图片">
            <img src="https://picsum.photos/300/200?random=21" alt="文章图片">
            <img src="https://picsum.photos/300/200?random=22" alt="文章图片">
          </div>
          <div class="article-stats">
            <div class="stat-item"><i class="fa fa-eye"></i> 1.2k</div>
            <div class="stat-item"><i class="fa fa-comment"></i> 48</div>
            <div class="stat-item"><i class="fa fa-heart"></i> 235</div>
            <div class="stat-item"><i class="fa fa-share"></i> 32</div>
          </div>
        </div>
        
        <div class="list-item">
          <div class="item-header">
            <img src="https://picsum.photos/100/100?random=11" class="user-avatar" alt="用户头像">
            <div class="user-info">
              <div class="user-name">镜头下的世界</div>
              <div class="post-time">昨天 15:30</div>
            </div>
            <div class="item-actions">
              <i class="fa fa-ellipsis-v"></i>
            </div>
          </div>
          <h3 class="article-title">从入门到精通：人像摄影布光全解析</h3>
          <p class="article-excerpt">
            光线是摄影的灵魂，尤其对于人像摄影来说，布光的好坏直接决定了作品的质量。本文将详细介绍人像摄影中常见的布光方式和技巧...
          </p>
          <div class="article-stats">
            <div class="stat-item"><i class="fa fa-eye"></i> 3.5k</div>
            <div class="stat-item"><i class="fa fa-comment"></i> 126</div>
            <div class="stat-item"><i class="fa fa-heart"></i> 589</div>
            <div class="stat-item"><i class="fa fa-share"></i> 156</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 相册列表 -->
    <div class="tab-pane fade" id="albums">
      <div class="content-section">
        <div class="list-item">
          <div class="item-header">
            <img src="https://picsum.photos/100/100?random=12" class="user-avatar" alt="用户头像">
            <div class="user-info">
              <div class="user-name">旅途摄影</div>
              <div class="post-time">3天前 · 创建了相册《西藏风光》</div>
            </div>
          </div>
          <div class="album-grid">
            <div class="album-item">
              <img src="https://picsum.photos/300/300?random=30" alt="相册图片">
            </div>
            <div class="album-item">
              <img src="https://picsum.photos/300/300?random=31" alt="相册图片">
            </div>
            <div class="album-item">
              <img src="https://picsum.photos/300/300?random=32" alt="相册图片">
              <div class="album-count">18张</div>
            </div>
          </div>
          <div class="article-stats mt-3">
            <div class="stat-item"><i class="fa fa-eye"></i> 2.7k</div>
            <div class="stat-item"><i class="fa fa-comment"></i> 76</div>
            <div class="stat-item"><i class="fa fa-heart"></i> 342</div>
          </div>
        </div>
        
        <div class="list-item">
          <div class="item-header">
            <img src="https://picsum.photos/100/100?random=13" class="user-avatar" alt="用户头像">
            <div class="user-info">
              <div class="user-name">城市夜景</div>
              <div class="post-time">1周前 · 创建了相册《都市霓虹》</div>
            </div>
          </div>
          <div class="album-grid">
            <div class="album-item">
              <img src="https://picsum.photos/300/300?random=33" alt="相册图片">
            </div>
            <div class="album-item">
              <img src="https://picsum.photos/300/300?random=34" alt="相册图片">
            </div>
            <div class="album-item">
              <img src="https://picsum.photos/300/300?random=35" alt="相册图片">
              <div class="album-count">24张</div>
            </div>
          </div>
          <div class="article-stats mt-3">
            <div class="stat-item"><i class="fa fa-eye"></i> 4.1k</div>
            <div class="stat-item"><i class="fa fa-comment"></i> 98</div>
            <div class="stat-item"><i class="fa fa-heart"></i> 621</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 动态列表 -->
    <div class="tab-pane fade" id="moments">
      <div class="content-section">
        <div class="list-item">
          <div class="item-header">
            <img src="https://picsum.photos/100/100?random=14" class="user-avatar" alt="用户头像">
            <div class="user-info">
              <div class="user-name">街头拍客</div>
              <div class="post-time">今天 09:45</div>
            </div>
            <div class="item-actions">
              <i class="fa fa-ellipsis-v"></i>
            </div>
          </div>
          <div class="moment-content">
            早起拍日出，运气不错遇到了难得的朝霞，分享给大家。使用的是Sony A7M3 + 16-35mm F4镜头，ISO 100，快门1/200s，光圈F8。
          </div>
          <div class="moment-images">
            <img src="https://picsum.photos/300/300?random=40" alt="动态图片">
            <img src="https://picsum.photos/300/300?random=41" alt="动态图片">
          </div>
          <div class="article-stats">
            <div class="stat-item"><i class="fa fa-comment"></i> 23</div>
            <div class="stat-item"><i class="fa fa-heart"></i> 156</div>
            <div class="stat-item"><i class="fa fa-share"></i> 18</div>
          </div>
        </div>
        
        <div class="list-item">
          <div class="item-header">
            <img src="https://picsum.photos/100/100?random=15" class="user-avatar" alt="用户头像">
            <div class="user-info">
              <div class="user-name">微距世界</div>
              <div class="post-time">昨天 16:20</div>
            </div>
            <div class="item-actions">
              <i class="fa fa-ellipsis-v"></i>
            </div>
          </div>
          <div class="moment-content">
            新买的微距镜头到了，迫不及待试拍了一下，昆虫的细节太震撼了！有没有同样喜欢微距摄影的朋友？
          </div>
          <div class="moment-images">
            <img src="https://picsum.photos/300/300?random=42" alt="动态图片">
            <img src="https://picsum.photos/300/300?random=43" alt="动态图片">
            <img src="https://picsum.photos/300/300?random=44" alt="动态图片">
          </div>
          <div class="article-stats">
            <div class="stat-item"><i class="fa fa-comment"></i> 56</div>
            <div class="stat-item"><i class="fa fa-heart"></i> 289</div>
            <div class="stat-item"><i class="fa fa-share"></i> 42</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 服务列表 -->
    <div class="tab-pane fade" id="services">
      <div class="content-section">
        <div class="list-item">
          <div class="service-header">
            <div class="service-title">专业人像摄影服务</div>
            <div class="service-price">¥399起</div>
          </div>
          <div class="service-provider">
            <i class="fa fa-user me-1"></i> 由 <span class="text-primary">光影工作室</span> 提供
          </div>
          <div class="service-tags">
            <span class="service-tag">人像</span>
            <span class="service-tag">写真</span>
            <span class="service-tag">精修</span>
            <span class="service-tag">上门</span>
          </div>
          <p class="article-excerpt">
            提供专业人像摄影服务，包括个人写真、情侣照、家庭合影等，含服装造型、专业拍摄和后期精修，赠送全部底片。
          </p>
          <div class="article-stats">
            <div class="stat-item"><i class="fa fa-star text-warning"></i> 4.9 (128条评价)</div>
            <div class="stat-item"><i class="fa fa-phone"></i> 联系服务</div>
          </div>
        </div>
        
        <div class="list-item">
          <div class="service-header">
            <div class="service-title">摄影器材租赁</div>
            <div class="service-price">¥50/天起</div>
          </div>
          <div class="service-provider">
            <i class="fa fa-user me-1"></i> 由 <span class="text-primary">器材共享社</span> 提供
          </div>
          <div class="service-tags">
            <span class="service-tag">相机</span>
            <span class="service-tag">镜头</span>
            <span class="service-tag">灯光</span>
            <span class="service-tag">租赁</span>
          </div>
          <p class="article-excerpt">
            提供各类摄影器材租赁服务，包括全画幅相机、专业镜头、闪光灯等，支持短期租赁和长期租赁，租金实惠，设备全新。
          </p>
          <div class="article-stats">
            <div class="stat-item"><i class="fa fa-star text-warning"></i> 4.7 (86条评价)</div>
            <div class="stat-item"><i class="fa fa-phone"></i> 联系服务</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 招聘列表 -->
    <div class="tab-pane fade" id="recruitments">
      <div class="content-section">
        <div class="list-item">
          <div class="job-title">全职摄影师</div>
          <div class="job-company">城市视觉摄影工作室</div>
          <div class="job-meta">
            <span><i class="fa fa-map-marker me-1"></i> 北京</span>
            <span><i class="fa fa-money me-1"></i> 8k-15k/月</span>
            <span><i class="fa fa-clock-o me-1"></i> 发布于3天前</span>
          </div>
          <p class="job-desc">
            负责商业摄影项目的拍摄工作，包括产品、人像等；能独立完成拍摄方案策划和执行；有2年以上商业摄影经验者优先。
          </p>
          <div class="article-stats">
            <div class="stat-item"><i class="fa fa-eye"></i> 328</div>
            <div class="stat-item"><i class="fa fa-file-text-o"></i> 投递简历</div>
          </div>
        </div>
        
        <div class="list-item">
          <div class="job-title">摄影后期修图师</div>
          <div class="job-company">光影数码影像公司</div>
          <div class="job-meta">
            <span><i class="fa fa-map-marker me-1"></i> 上海</span>
            <span><i class="fa fa-money me-1"></i> 6k-12k/月</span>
            <span><i class="fa fa-clock-o me-1"></i> 发布于1周前</span>
          </div>
          <p class="job-desc">
            负责照片后期处理工作，熟练使用PS等修图软件；有良好的审美能力和色彩感知；有婚纱摄影或商业修图经验者优先。
          </p>
          <div class="article-stats">
            <div class="stat-item"><i class="fa fa-eye"></i> 256</div>
            <div class="stat-item"><i class="fa fa-file-text-o"></i> 投递简历</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 求职列表 -->
    <div class="tab-pane fade" id="job-seekings">
      <div class="content-section">
        <div class="list-item">
          <div class="item-header">
            <img src="https://picsum.photos/100/100?random=16" class="user-avatar" alt="用户头像">
            <div class="user-info">
              <div class="user-name">专业摄影师小李</div>
              <div class="post-time">2天前发布</div>
            </div>
          </div>
          <div class="job-title">寻求兼职商业摄影师职位</div>
          <div class="job-meta">
            <span><i class="fa fa-map-marker me-1"></i> 广州</span>
            <span><i class="fa fa-money me-1"></i> 期望薪资：500-1000/天</span>
          </div>
          <p class="job-desc">
            5年商业摄影经验，擅长产品、美食、人像拍摄，自有全套专业设备，可接各类商业拍摄单子，有需要的公司可联系详谈。
          </p>
          <div class="article-stats">
            <div class="stat-item"><i class="fa fa-eye"></i> 189</div>
            <div class="stat-item"><i class="fa fa-comment"></i> 联系我</div>
          </div>
        </div>
        
        <div class="list-item">
          <div class="item-header">
            <img src="https://picsum.photos/100/100?random=17" class="user-avatar" alt="用户头像">
            <div class="user-info">
              <div class="user-name">后期达人</div>
              <div class="post-time">5天前发布</div>
            </div>
          </div>
          <div class="job-title">寻求摄影后期修图兼职</div>
          <div class="job-meta">
            <span><i class="fa fa-map-marker me-1"></i> 远程</span>
            <span><i class="fa fa-money me-1"></i> 期望薪资：30-50/张</span>
          </div>
          <p class="job-desc">
            专业修图师，6年后期经验，擅长人像精修、商业产品修图，效率高，质量保证，可接批量修图订单，有意者请联系。
          </p>
          <div class="article-stats">
            <div class="stat-item"><i class="fa fa-eye"></i> 215</div>
            <div class="stat-item"><i class="fa fa-comment"></i> 联系我</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部操作栏 -->
  <div class="bottom-actions">
    <button class="btn btn-outline-secondary bottom-btn">
      <i class="fa fa-home"></i> 首页
    </button>
    <button class="btn btn-primary bottom-btn">
      <i class="fa fa-pencil"></i> 发布内容
    </button>
    <button class="btn btn-outline-secondary bottom-btn">
      <i class="fa fa-user"></i> 我的
    </button>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 加入群组按钮交互
    document.querySelector('.group-actions .btn-primary').addEventListener('click', function() {
      if (this.innerHTML.includes('加入')) {
        this.innerHTML = '<i class="fa fa-check me-1"></i> 已加入';
        this.classList.remove('btn-primary');
        this.classList.add('btn-success');
      } else {
        this.innerHTML = '<i class="fa fa-plus me-1"></i> 加入';
        this.classList.remove('btn-success');
        this.classList.add('btn-primary');
      }
    });
    
    // 导航标签切换时滚动到顶部
    document.querySelectorAll('.nav-tabs .nav-link').forEach(link => {
      link.addEventListener('click', function() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
    });
    
    // 点赞功能模拟
    document.querySelectorAll('.stat-item .fa-heart').forEach(heart => {
      heart.addEventListener('click', function(e) {
        e.stopPropagation();
        if (this.classList.contains('text-danger')) {
          this.classList.remove('text-danger');
          // 减少点赞数
          let countEl = this.parentElement;
          let count = parseInt(countEl.textContent.trim().split(' ').pop());
          countEl.innerHTML = `<i class="fa fa-heart"></i> ${count - 1}`;
        } else {
          this.classList.add('text-danger');
          // 增加点赞数
          let countEl = this.parentElement;
          let count = parseInt(countEl.textContent.trim().split(' ').pop());
          countEl.innerHTML = `<i class="fa fa-heart text-danger"></i> ${count + 1}`;
        }
      });
    });
  </script>
</body>
</html>
